<template>
  <div id="detail">
    <div class="head">
      <nav-bar>网易严选</nav-bar>
    </div>
    <scroll class="content" ref="scroll">
      <van-swipe
        :autoplay="3000"
        class="swipe"
        @change="onChange"
        v-if="images"
      >
        <van-swipe-item
          v-for="(image, index) in images"
          :key="index"
          class="swipe-item"
        >
          <img v-lazy="image" />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/4</div>
        </template>
      </van-swipe>
      <div class="introduct">
        <div class="price">
          {{ "¥" + detail.retail_price }}
        </div>
        <div class="name">
          {{ detail.name }}
        </div>
        <div class="brief">
          {{ detail.goods_brief }}
        </div>
      </div>
      <div class="gap"></div>
      <div class="select">
        <div class="inner">请选择规格数量</div>
        <van-icon name="arrow" size="25" color="#d9d9d9" />
      </div>
      <div class="comment" v-if="comment">
        <div class="select">
          <div class="inner">用户评价（{{ comment.count }}）</div>
          <van-icon name="arrow" size="25" color="#d9d9d9" />
        </div>
        <div class="example">
          <div class="time">
            {{ comment.data.add_time }}
          </div>
          <div class="dec">
            {{ comment.data.content }}
          </div>
          <ul class="picture">
            <li v-for="item in comment.data.pic_list">
              <img :src="item.pic_url" alt="" />
            </li>
          </ul>
        </div>
      </div>
      <div class="gap"></div>
      <div class="parameter" v-if="parameter">
        <div class="title">商品参数</div>
        <div class="item" v-for="item in parameter">
          <span class="name">
            {{ item.name }}
          </span>
          <span class="value">
            {{ item.value }}
          </span>
        </div>
      </div>
      <div class="imgdetails" v-html="detail.goods_desc"></div>
      <div class="commonissues">
        <div class="tt">
          <div class="line"></div>
          <span class="title">常见问题</span>
        </div>
        <div class="aq" v-for="item in issue">
          <div class="question">
            <i class="icon"></i>
            <span class="text">
              {{ item.question }}
            </span>
          </div>
          <div class="answer">
            {{ item.answer }}
          </div>
        </div>
      </div>
      <div class="tt">
        <div class="line"></div>
        <span class="title">你可能还喜欢</span>
      </div>
      <goods :goodsList="goodsList"></goods>
    </scroll>
    <detail-tabbar @addCart="addToCart"></detail-tabbar>
  </div>
</template>
<script>
import { getGoodsDetail } from "network/detail";
import { getGoodsRelated } from "network/detail";

import Scroll from "components/common/Scroll.vue";
import NavBar from "components/common/NavBar";
import Goods from "components/common/Goods.vue";
import DetailTabbar from "components/detail/DetailTabbar.vue";
export default {
  name: "Detail",
  data() {
    return {
      images: [],
      current: 0,
      detail: {},
      comment: null,
      parameter: null,
      issue: [],
      goodsList: [],
    };
  },
  components: {
    Scroll,
    NavBar,
    Goods,
    DetailTabbar,
  },
  created() {
    this.getGoodsDetail();
    this.getGoodsRelated();
  },
  mounted() {
    let count = 0;
    var timeInterval = setInterval(() => {
      let imgs = document.querySelectorAll(".imgdetails img");
      if (imgs.length > 0) {
        clearInterval(timeInterval);
        for (let item of imgs) {
          item.onload = this.imageLoad;
        }
      }
      count++;
      if (count > 10) {
        clearInterval(timeInterval);
      }
    }, 10);

    const refresh = this.debounce(this.$refs.scroll.refresh, 50);
    this.$bus.$on("itemImageLoad", () => {
      refresh();
    });
  },
  watch: {
    $route(to, from) {
      window.location.reload();
    },
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    getGoodsDetail() {
      getGoodsDetail(this.$route.params.id)
        .then((res) => {
          if (res.data.data.gallery.length != 0) {
            for (let i = 0; i < 4; i++) {
              this.images[i] = res.data.data.gallery[i].img_url;
            }
          }
          this.detail = res.data.data.info;
          this.comment = res.data.data.comment;
          this.parameter = res.data.data.attribute;
          this.issue = res.data.data.issue;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getGoodsRelated() {
      getGoodsRelated(this.$route.params.id)
        .then((res) => {
          this.goodsList = res.data.data.goodsList;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addToCart() {
      const product = {};
      product.id = this.detail.id;
      product.picture = this.detail.list_pic_url;
      product.name = this.detail.name;
      product.price = this.detail.retail_price;
      product.isChecked = true;
      product.flag = false;
      let newProduct = this.$store.state.cartList.find(
        (item) => product.id == item.id
      );
      if (newProduct) {
        this.$toast("已加入购物车！");
      } else {
        product.count = 1;
        this.$store.commit("addCart", product);
        this.$toast("加入成功");
      }
    },
    imageLoad() {
      this.$bus.$emit("itemImageLoad");
    },
    debounce(func, delay) {
      let timer = null;
      return function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, args);
        }, delay);
      };
    },
  },
};
</script>
<style scoped>
#detail {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 52px;
}
.head {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 4;
}
.swipe img {
  width: 100%;
  height: 375px;
}
.custom-indicator {
  position: absolute;
  right: 15px;
  bottom: 15px;
  padding: 1px 5px;
  font-size: 12px;
  background-color: #fff;
  color: #333;
  border-radius: 4px;
}
.introduct {
  padding: 13px 0 18px 15px;
}
.introduct .price {
  color: #dd1a21;
  font-family: PingFang SC;
  font-size: 27px;
  font-weight: 700;
}
.introduct .name {
  font-size: 16px;
  color: #333;
  line-height: 24px;
  margin-top: 10px;
  font-weight: 700;
}
.introduct .brief {
  font-size: 12px;
  color: #616060;
}
.gap {
  height: 10px;
  background-color: rgb(244, 244, 244);
}
.select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 53px;
  padding: 0 15px 0;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #d9d9d9;
}
.comment .example {
  /* height: 201px; */
  padding: 0 15px;
}
.comment .example .time {
  margin: 15px 0;
  font-size: 12px;
  line-height: 1;
  color: #7f7f7f;
}
.comment .example .dec {
  margin-bottom: 15px;
  font-size: 14px;
  color: #333;
  line-height: 20px;
}
.comment .example .picture {
  margin-bottom: 15px;
}
.comment .example .picture img {
  height: 72px;
  width: 72px;
}
.parameter {
  padding: 15px 15px 15px;
}
.parameter .title {
  padding: 20px 0 12px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px dashed #616060;
}
.parameter .item {
  display: flex;
  line-height: 22px;
  font-size: 12px;
  border-bottom: 1px dashed #616060;
  padding: 5px 0;
}
.parameter .item .name {
  flex: 5;
  /* width: 74px; */
  color: #999;
}
.parameter .item .value {
  flex: 18;
  /* width: 270px; */
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.imgdetails p {
  margin: 0;
  padding: 0;
}
.imgdetails >>> img {
  display: block;
  width: 100%;
}
.commonissues {
  padding: 0 15px 30px;
}
.tt {
  position: relative;
  margin-bottom: 27px;
  text-align: center;
}
.tt .title {
  display: inline-block;
  padding: 0 8px 0;
  position: relative;
  font-size: 16px;
  color: #333;
  z-index: 2;
  background-color: #fff;
  line-height: 1;
}
.tt .line {
  width: 149px;
  border-bottom: 1px solid #ccc;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 1px;
  background-color: #ccc;
  z-index: 1;
}
.commonissues .aq {
  margin-bottom: 13px;
}
.commonissues .aq .question {
  display: flex;
  align-items: center;
  margin-bottom: 7.5px;
}
.commonissues .aq .question .icon {
  display: block;
  width: 8px;
  height: 8px;
  background-color: #dd1a21;
  border-radius: 50%;
  font-size: 0.26rem;
}
.commonissues .aq .question .text {
  font-size: 13px;
  color: #303030;
}
.commonissues .aq .answer {
  padding-left: 8px;
  font-size: 13px;
  color: #787878;
}
</style>